<template>
	<view class="wanl-list">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar bg-bgcolor fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round" @tap="search()">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<view class="searchinfo cu-tag round" v-if="category">
						<text>类目:{{ category }}</text>
						<text class="wlIcon-shanchu2"></text>
					</view>
					<view class="searchinfo cu-tag round text-df" v-else-if="params.search">
						<text>{{ params.search }}</text>
						<text class="wlIcon-shanchu2"></text>
					</view>
					<view v-else>搜索</view>
				</view>
				<view class="action" @tap="editListstyle()">
					<text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-20'"></text>
					<text class="wlIcon-liebiao" v-else></text>
				</view>
			</view>
		</view>

		<view class="head" :class="{ headtop: scrollStype }">
			<!-- class cue 和组件 冲突 目前隐藏 下面一行 <view class="cue"> -->
			<view class="cue">
				<view class="bar">
					<view class="item pl20" @tap="tabClick(0)">
						<u-dropdown @open="open" @close="close" active-color='#ff4f00'
							:class="[{ current: filterIndex === 0 },{'aaa':!dropdownShow}]">
							<u-dropdown-item v-model="value1" :title="dropdownTitle" :options="options1"
								@change="changeDropdown"></u-dropdown-item>
						</u-dropdown>
					</view>
					<!-- <view class="item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">综合</view> -->
					<view class="item" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">销量</view>
					<view class="item" :class="{ current: filterIndex === 4 }" @tap="tabClick(4)">店铺</view>
					<view class="item" :class="{ current: filterIndex === 5 }" @tap="tabClick(5)">视频</view>
					<!-- <view class="item" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">新上架</view>
					<view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
						<text>价格</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }"
								class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }"
								class="wlIcon-jiang"></text>
						</view>
					</view> -->
					<view class="item pr20" @tap="showDrawer()">
						筛选
						<text class="wlIcon-shaixuan margin-left-xs "></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 主体 -->

		<block v-if="filterIndex == 0 || filterIndex == 1">
			<wanl-product :shopnameType="true" :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType" />
		</block>
		<block v-if="filterIndex == 4">
			<!-- 关注店铺 -->
			<view class="msFoxBox " v-for="(item,index) in goodsData" :key="index" v-if="goodsData">
				<view class="flex_ac" @click="$wanlshop.to('/pages/shop/index?id=' + item.id)">
					<image class="msFoxBoxHeadImg" :src="$wanlshop.oss(item.avatar)" mode="">
					</image>
					<view class="ml16 flex1 rightBox overflow_1">
						<view class="f28 fb flex ">
							<view class="flex1 flex_ac">
								<image v-if="item.self_suport == 1"
									style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
									src="https://img.aibbyp.com/wechatUser/allOthers/shopQJ.png" mode=""></image>
								<block class="" v-else>
									<image v-if="item.isself == 1"
										style="width: 60rpx;height: 30rpx;margin:0rpx 12rpx 0 0;"
										src="https://img.aibbyp.com/wechatUser/allOthers/shopZY.png" mode=""></image>
								</block>
								<view class="flex1 overflow_1">
									{{item.shopname}}
								</view>
							</view>
							<view class="f20  tar ml8">
								距您 {{item.distance}}km
							</view>
						</view>
						<view class="flex mt12 couponsBox" v-if="item.coupons">
							<block v-for="(coupons,couponsIndex) in item.coupons" :key="couponsIndex">
								<view class="msi2 ml10 imgSize cf f16 flex" v-if="coupons.type == 'reduction'">
									<view class="msiBac">
										￥{{coupons.price}}
									</view>
									<image style="margin-left: -4rpx;height: 100%;"
										src="https://img.aibbyp.com/wechatUser/iconmj.png" mode="heightFix">
									</image>
								</view>
								<view class="msi1 ml10 imgSize cf f16 flex" v-if="coupons.type == 'discount'">
									<view class="msiBac">
										{{coupons.discount}}
									</view>
									<image style="margin-left: -4rpx;height: 100%;"
										src="https://img.aibbyp.com/wechatUser/iconzk.png" mode="heightFix">
									</image>
								</view>
								<view class="msi3 ml10 imgSize cf f16" v-if="coupons.type == 'shipping'">
								</view>
							</block>
						</view>
						<view class="flex mt12">
							<view class="sdsj">
								{{item.flash_send_time}}
							</view>
							<view class="sdfy ml12">
								预估运费：{{item.sendPrice}}元
							</view>

						</view>
					</view>
				</view>
				<view class="flex mt12">
					<view class="goodsBox" v-for="(item1,index3) in item.goods" :key="index3"
						@click="$wanlshop.to('/pages/product/goods?id='+item1.id)">
						<image class="imggoods" :src="$wanlshop.oss(item1.image)" mode="">
						</image>
						<view class="f24 overflow_1">
							{{item1.title}}
						</view>
						<view class="error f28">
							￥{{item1.price}}
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="filterIndex == 5">
			<wanlIndexExperience :flowList='goodsData' :statusMore='status'></wanlIndexExperience>
		</block>
		<block v-if="goodsData.length === 0 && status !== 'loading'">
			<wanl-empty :text="empty" />
			<wanl-divider width="60%">猜你喜欢</wanl-divider>
			<wanl-product :shopnameType="true" :dataList="likeData" />
		</block>

		<uni-load-more :status="status" :content-text="contentText" />
		<uni-drawer :visible="showRight" mode="right" @close="closeDrawer">
			<view class="drawer">
				<scroll-view scroll-y="true" class="scroll"
					:style="{ height: $wanlshop.wanlsys().windowHeight + 'px' }">
					<view class="item solid-bottom" v-if="drawerData.brand.length > 0">
						<view class="title">品牌</view>
						<view class="list">
							<text v-for="(bd, index) in drawerData.brand" :key="bd.id" :class="{ active: bd.choice }"
								data-key="brand" :data-attribute="index" @tap="onDraver">
								{{ bd.name }}
							</text>
						</view>
					</view>
					<view class="item solid-bottom">
						<view class="title">价格区间</view>
						<view class="from">
							<input type="number" placeholder="最低价" v-model="drawerData.price.low" value="" />
							<text class="">—</text>
							<input type="number" placeholder="最高价" v-model="drawerData.price.high" value="" />
						</view>
					</view>
					<view class="item solid-bottom" v-if="false">
						<view class="title" data-key="city" @tap="onDraverTitle">
							<text>发货地</text>
							<text :class="[drawerType.city ? 'wlIcon-fanhui3' : 'wlIcon-fanhui4']"></text>
						</view>
						<view class="list">
							<text class="wlIcon-weizhi" data-key="sameCity"
								:class="{ active: drawerData.sameCity.choice }" :data-data="drawerData.sameCity.name"
								@tap="onDraver">
								{{ drawerData.sameCity.name }}
							</text>
						</view>
						<view class="title" v-if="drawerType.city"><text>城市</text></view>
						<view class="list" v-if="drawerType.city">
							<text v-for="(cy, index) in drawerData.city" :key="cy.name" :class="{ active: cy.choice }"
								data-key="city" :data-attribute="index" @tap="onDraver">
								{{ cy.name }}
							</text>
						</view>
					</view>
					<block v-if="drawerData.attribute.length > 0" v-for="(att, index) in drawerData.attribute"
						:key="att.name">
						<view class="item solid-bottom">
							<view class="title" :data-key="index" @tap="onDraverTitle">
								<text>{{ att.name }}</text>
								<text
									:class="[drawerData.attribute[index].fold ? 'wlIcon-fanhui3' : 'wlIcon-fanhui4']"></text>
							</view>
							<view class="list" v-if="drawerData.attribute[index].fold">
								<text v-for="(val, key) in att.value" :key="val.name" :data-key="key"
									:data-attribute="index" :class="{ active: val.choice }" @tap="onDraver">
									{{ val.name }}
								</text>
							</view>
						</view>
					</block>
				</scroll-view>
				<view class="footer">
					<view>
						<button class="cu-btn bg-gradual-yellow round-left" @tap="onDrawerReset">重置</button>
						<button class="cu-btn bg-gradual-orange round-right" @tap="onDrawerTo">确定</button>
					</view>
				</view>
			</view>
		</uni-drawer>
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import wanlIndexExperience from "@/components/wanl-index/experience.vue"
	export default {
		components: {
			wanlIndexExperience
		},
		data() {
			return {
				dropdownShow: false,
				loadingType: 'more',
				dropdownTitle: '近距离',
				value1: 0,
				options1: [{
						label: '近距离',
						value: 0,
					},
					{
						label: '低价格',
						value: 1,
					},
					{
						label: '高价格',
						value: 2,
					},
				],
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				liststyle: 'col-2-20', //列表样式
				goodsData: [], //商品列表数据
				showRight: false,
				category: '',
				goodsType: 'goods',
				empty: '没有找到任何宝贝',
				params: {
					limit: 14,
					search: '',
					sort: 'distance',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				likeData: [],
				drawerType: {
					attribute: false,
					first: false,
					city: false
				},
				drawerData: {
					price: {
						low: '',
						high: ''
					},
					brand: [],
					attribute: [],
					sameCity: {
						name: ' 定位中..',
						choice: false
					},
					city: [{
							name: '北京',
							choice: false
						},
						{
							name: '天津',
							choice: false
						},
						{
							name: '河北',
							choice: false
						},
						{
							name: '山西',
							choice: false
						},
						{
							name: '内蒙古',
							choice: false
						},
						{
							name: '山东',
							choice: false
						},
						{
							name: '江苏',
							choice: false
						},
						{
							name: '上海',
							choice: false
						},
						{
							name: '浙江',
							choice: false
						},
						{
							name: '安徽',
							choice: false
						},
						{
							name: '福建',
							choice: false
						},
						{
							name: '江西',
							choice: false
						},
						{
							name: '河南',
							choice: false
						},
						{
							name: '湖南',
							choice: false
						},
						{
							name: '湖北',
							choice: false
						},
						{
							name: '广东',
							choice: false
						},
						{
							name: '广西',
							choice: false
						},
						{
							name: '海南',
							choice: false
						},
						{
							name: '辽宁',
							choice: false
						},
						{
							name: '吉林',
							choice: false
						},
						{
							name: '黑龙江',
							choice: false
						},
						{
							name: '四川',
							choice: false
						},
						{
							name: '贵州',
							choice: false
						},
						{
							name: '云南',
							choice: false
						},
						{
							name: '重庆',
							choice: false
						},
						{
							name: '宁夏',
							choice: false
						},
						{
							name: '青海',
							choice: false
						},
						{
							name: '陕西',
							choice: false
						},
						{
							name: '甘肃',
							choice: false
						},
						{
							name: '新疆',
							choice: false
						},
						{
							name: '西藏',
							choice: false
						},
						{
							name: '香港',
							choice: false
						},
						{
							name: '澳门',
							choice: false
						},
						{
							name: '台湾',
							choice: false
						}
					]
				},
				drawerParams: {},
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad(option) {
			// console.log(JSON.parse(option.data) );
			if (option.type) {
				this.goodsType = option.type;
			}
			if (option.search) {
				//如果搜索存在
				this.params.search = option.search;
				this.drawerParams.search = option.search;
			} else if (option.data) {
				var data = JSON.parse(option.data);
				this.drawerParams.category_id = data.category_id;
				this.category = data.category_name;
				this.params.filter.category_id = data.category_id;
				this.params.op.category_id = 'in';
			} else {
				console.log('调试模式');
			}
			// 加载位置，后续版本开启加载写入全局
			
			this.loadData();
			if (this.goodsData.length == 0) {
				this.loadlikeData();
			}
		},
		// 监听上拉
		onPullDownRefresh() {
			this.params.page = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		// 监听返回
		onUnload() {
			if (this.showRight) {
				this.closeDrawer();
				return true;
			}
		},

		methods: {

			open() {
				this.dropdownShow = true
			},
			close() {
				this.dropdownShow = false
			},
			changeDropdown(data) {
				this.filterIndex = 0
				this.dropdownTitle = this.options1[data].label
				this.tabClick(0)
			},
			//异步加载商品列表
			async loadData() {
				let url = '/wanlshop/product/lists'
				let data = JSON.parse(JSON.stringify(this.params))
				let title = '宝贝'
				this.params.type = this.goodsType;
				if (this.filterIndex == 4) {
					url = '/wanlshop/product/shopList'
					data = {
						type: 0,
						shopname: this.params.search,
						page: this.params.page,
						limit: this.params.limit,
					}
					title = '店铺'
				}
				if (this.filterIndex == 5) {
					this.getList()
					return
				}
				this.$api.get({
					url: url,
					data: data,
					success: res => {
						uni.stopPullDownRefresh();
						this.goodsData = this.reload ? res.data : this.goodsData.concat(res.data); //数据 追加
						if (res.data.length == 0) {
							this.empty = `没找到与“${this.category}${this.params.search}"相关的${title}`;
							this.status = 'noMore';
							return
						}
						if (res.last_page == res.current_page) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
						this.params.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
					}
				});
			},
			getList() { //经验 --数据
				this.$api.get({
					url: '/contents/index',
					data: {
						page: this.params.page,
						limit: 15,
						type: 0,
						title: this.params.search
					}
				}).then(res => {

					res.data.forEach(a => {
						if (a.type == 'video') {
							a.videoImg = this.$wanlshop.oss(a.content_url.replace('mp4', 'jpg'))
						}
						a.content_url = this.$wanlshop.oss(a.content_url)
						a.shop.avatar = this.$wanlshop.oss(a.shop.avatar)
					})
					uni.stopPullDownRefresh();
					this.goodsData = this.reload ? res.data : this.goodsData.concat(res.data); //数据 追加
					if (res.data.length == 0) {
						this.empty = `没找到与“${this.category}${this.params.search}"相关的视频`;
						this.status = 'noMore';
						return
					}
					if (res.last_page == res.current_page) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}
					this.params.page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					// this.addRandomData(res.data);
				})
			},

			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				this.$api.get({
					url: `/wanlshop/product/likes?pages=${this.goodsType}`,
					success: res => {
						this.likeData = res.data; //评论数据 追加
					}
				});
			},
			// 加载侧边栏数据
			async loadDrawer() {
				this.drawerParams.type = this.goodsType;
				this.$api.get({
					url: '/wanlshop/product/drawer',
					data: this.drawerParams,
					success: res => {
						var brand = [],
							attribute = [];
						if (res.brand) {
							res.brand.forEach(item => {
								var brandData = {
									id: item.id,
									name: item.name,
									fold: false, // 展开
									choice: false
								};
								brand.push(brandData);
							});
						}
						if (res.attribute) {
							res.attribute.forEach(item => {
								var value = [];
								item.value.forEach(vo => {
									var valueData = {
										name: vo.name,
										choice: false
									};
									value.push(valueData);
								});
								var attributeData = {
									name: item.name,
									value: value,
									fold: false
								};
								attribute.push(attributeData);
							});
						}
						this.drawerData.brand = brand;
						this.drawerData.attribute = attribute;
					}
				});
			},
			//筛选点击
			tabClick(index) {
				// 0 综合 默认1按距离  1销量 4店铺 5视频
				this.filterIndex = index;
				this.params.page = 1
				this.goodsData = []
				if (this.filterIndex == 0) {
					if (this.value1 == 0) {
						this.params.sort = 'distance'
					} else {
						this.params.sort = 'price'
						if (this.value1 == 1) {
							this.params.order = 'asc'
						}
						if (this.value1 == 2) {
							this.params.order = 'desc'
						}
					}
				}
				if (this.filterIndex == 1) {
					this.params.sort = 'sales'
					this.params.order = 'asc'
				}

				this.status = 'loading';
				this.params.page = 1;
				this.reload = true;
				this.loadData();

			},
			// 打开抽屉，并且加载品牌和类目属性
			showDrawer() {
				this.showRight = true;
				if (!this.drawerType.first) {
					this.loadDrawer();
					this.drawerType.first = true;
				}
			},
			// 点击抽屉
			onDraver(e) {
				var index = e.currentTarget.dataset.attribute,
					key = e.currentTarget.dataset.key;
				if (key == 'brand' || key == 'city') {
					// 取消所有选项,选中下面
					this.drawerData[key].forEach((item, keys) => {
						keys != index ? (item.choice = false) : '';
					});
					// 取消同城
					this.drawerData.sameCity.choice = false;
					this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
				} else if (key == 'sameCity') {
					// 取消所有城市选项
					this.drawerData.city.forEach(item => {
						item.choice = false;
					});
					this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
				} else {
					// 取消所有选项,选中下面
					this.drawerData.attribute[index].value.forEach((item, keys) => {
						keys != key ? (item.choice = false) : '';
					});
					this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key]
						.choice;
				}
			},
			// 提交抽屉
			onDrawerTo() {
				// 查询价格
				if (this.drawerData.price.low != '' && this.drawerData.price.high != '') {
					this.params.filter.price = this.drawerData.price.low + ',' + this.drawerData.price.high;
					this.params.op.price = 'BETWEEN';
				} else {
					delete this.params.filter.price;
					delete this.params.op.price;
				}
				// 查询地址
				var cityData = '';
				this.drawerData.city.forEach(item => {
					if (item.choice) {
						cityData = item.name;
					}
				});
				if (cityData) {
					this.params.filter['shop.city'] = '%' + cityData + '%';
					this.params.op['shop.city'] = 'LIKE';
				} else if (this.drawerData.sameCity.choice) {
					this.params.filter['shop.city'] = this.drawerData.sameCity.name;
					this.params.op['shop.city'] = 'LIKE';
				} else {
					delete this.params.filter['shop.city'];
					delete this.params.op['shop.city'];
				}
				// 查询品牌
				var brandData = '';
				this.drawerData.brand.forEach(item => {
					if (item.choice) {
						brandData = item.id;
					}
				});
				if (brandData) {
					this.params.filter.brand_id = brandData;
					this.params.op.brand_id = '=';
				} else {
					delete this.params.filter.brand_id;
					delete this.params.op.brand_id;
				}
				// 查询属性
				var attributeData = [];
				this.drawerData.attribute.forEach((item, index) => {
					// item.name
					item.value.forEach((vo, index) => {
						if (vo.choice) {
							attributeData.push('%' + vo.name + '%');
						}
					});
				});
				// 1.0.8升级 有此项无法查询
				if (attributeData.length > 0) {
					this.params.filter.category_attribute = attributeData.join(',');
					this.params.op.category_attribute = 'LIKE';
				} else {
					delete this.params.filter.category_attribute;
					delete this.params.op.category_attribute;
				}
				this.status = 'loading';
				// 1.0.8升级
				this.goodsData = [];
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				this.closeDrawer();
			},
			// 重置抽屉
			onDrawerReset() {
				this.drawerData.city.forEach(item => {
					item.choice = false;
				});
				this.drawerData.sameCity.choice = false;
				this.loadDrawer();
			},
			// 点击抽屉标题
			onDraverTitle(e) {
				var stype = e.currentTarget.dataset.key;
				if (stype === 'city') {
					this.drawerType[stype] = !this.drawerType[stype];
				} else {
					this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
				}
			},
			// 关闭抽屉
			closeDrawer() {
				this.showRight = false;
			},
			search() {
				uni.navigateBack({
					delta: 1
				})
				// this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, 'fade-in', 100);
			},
			editListstyle() {
				this.liststyle = this.liststyle == 'col-1-10' ? 'col-2-20' : 'col-1-10';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.imgSize {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.msFoxBox {
		background: #fff;
		padding: 28rpx 38rpx 20rpx;
		margin-bottom: 20rpx;

		.goodsBox:nth-child(n+2) {
			margin-left: 22rpx;
		}

		.goodsBox {
			width: 152rpx;

			.imggoods {
				width: 152rpx;
				height: 152rpx;
				border-radius: 6rpx;
			}
		}


		.msFoxBoxHeadImg {
			width: 124rpx;
			height: 124rpx;
			border-radius: 8rpx;
		}

		.rightBox {
			max-width: calc(100% - 150rpx);
		}

		.msiBac {
			background: linear-gradient(90deg, #FD5241 0%, #FE7046 23%);
			// height: 18rpx;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			padding: 0 8rpx;
		}

		.msi1 {
			height: 32rpx;
			padding: 0 10rpx;
			line-height: 32rpx;
			flex-shrink: 0;

		}

		.msi2 {
			flex-shrink: 0;
			height: 32rpx;
			padding: 0 10rpx;
			line-height: 32rpx;
		}

		.msi3 {
			flex-shrink: 0;
			width: 132rpx;
			height: 32rpx;
			padding: 0 10rpx;
			line-height: 32rpx;
			background-image: url('https://img.aibbyp.com/wechatUser/iconby.png');
		}

		.sdsj {
			font-size: 20rpx;
			color: #34C759;
		}

		.sdfy {
			background: rgba(255, 201, 196, 0.3);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 0rpx 16rpx;
			font-size: 20rpx;
			color: #FD5241;
		}
	}

	.bar {
		padding: 0 !important;
	}

	::v-deep .u-dropdown__content {
		width: 100vw !important;
		margin-left: -20rpx;
		// height: 40rpx !important;
	}

	.cu-custom .search-form {
		border: 3rpx solid #fe6600;
		background-color: #fff;
	}

	.cu-tag:not([class*="bg"]):not([class*="line"]) {
		background-color: #f7f7f7;
	}

	.current {
		::v-deep .u-dropdown__menu__item__text {
			color: #ff4f00 !important;
		}
	}
</style>